<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>上传功能测试</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      margin: 0;
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
      background: white;
      border-radius: 20px;
      padding: 30px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }

    h1 {
      text-align: center;
      color: #333;
      margin-bottom: 30px;
    }

    .test-section {
      margin: 20px 0;
      padding: 20px;
      border: 2px solid #eee;
      border-radius: 15px;
      background: #f9f9f9;
    }

    .test-result {
      margin: 10px 0;
      padding: 10px;
      border-radius: 5px;
    }

    .success {
      background: #d4edda;
      color: #155724;
      border: 1px solid #c3e6cb;
    }

    .error {
      background: #f8d7da;
      color: #721c24;
      border: 1px solid #f5c6cb;
    }

    .warning {
      background: #fff3cd;
      color: #856404;
      border: 1px solid #ffeaa7;
    }

    .info {
      background: #d1ecf1;
      color: #0c5460;
      border: 1px solid #bee5eb;
    }

    .feature-list {
      list-style: none;
      padding: 0;
    }

    .feature-list li {
      margin: 10px 0;
      padding: 10px;
      background: white;
      border-radius: 8px;
      border-left: 4px solid #ff6b6b;
    }

    .test-button {
      background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
      color: white;
      border: none;
      padding: 12px 24px;
      border-radius: 25px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      margin: 10px 5px;
    }

    .test-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(255, 107, 107, 0.3);
    }

    .file-test {
      border: 2px dashed #ddd;
      border-radius: 10px;
      padding: 20px;
      text-align: center;
      background: #fafafa;
      margin: 10px 0;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .file-test:hover {
      border-color: #ff6b6b;
      background: #fff5f5;
    }

    .console-output {
      background: #f5f5f5;
      border: 1px solid #ddd;
      border-radius: 5px;
      padding: 10px;
      font-family: 'Courier New', monospace;
      font-size: 12px;
      max-height: 200px;
      overflow-y: auto;
      white-space: pre-wrap;
    }
  </style>
</head>
<body>
<div class="container">
  <h1>🚀 文件上传功能测试</h1>

  <div class="test-section">
    <h2>📋 上传功能特性</h2>
    <ul class="feature-list">
      <li>✅ <strong>文件类型验证</strong> - 支持 JPG、PNG、GIF、WebP 格式</li>
      <li>📏 <strong>文件大小限制</strong> - 最大支持 10MB</li>
      <li>🔄 <strong>重复文件检测</strong> - 防止重复上传相同文件</li>
      <li>📊 <strong>上传进度显示</strong> - 实时显示读取进度</li>
      <li>⚡ <strong>错误处理</strong> - 完善的错误捕获和提示</li>
      <li>🎯 <strong>拖拽支持</strong> - 支持点击和拖拽两种方式</li>
    </ul>
  </div>

  <div class="test-section">
    <h2>🔍 自动测试结果</h2>
    <div id="testResults"></div>
  </div>

  <div class="test-section">
    <h2>🧪 功能测试</h2>

    <div class="file-test" onclick="testFileAPI()">
      <strong>📁 测试文件API支持</strong><br>
      点击测试浏览器文件API功能
    </div>

    <div class="file-test" onclick="testFileValidation()">
      <strong>✅ 测试文件验证逻辑</strong><br>
      模拟文件类型和大小验证
    </div>

    <div class="file-test" onclick="clearConsole()">
      <strong>🧹 清除控制台日志</strong><br>
      清除下方的控制台输出
    </div>

    <button class="test-button" onclick="openMainPage()">打开发布页面</button>

    <h3>控制台输出:</h3>
    <div class="console-output" id="consoleOutput">控制台日志将显示在这里...</div>
  </div>
</div>

<script>
  // 重定向console.log到页面显示
  let consoleOutput = document.getElementById('consoleOutput');
  let originalLog = console.log;

  console.log = function (...args) {
    originalLog.apply(console, args);
    if (consoleOutput) {
      const message = args.map(arg =>
          typeof arg === 'object' ? JSON.stringify(arg, null, 2) : String(arg)
      ).join(' ');
      consoleOutput.textContent += new Date().toLocaleTimeString() + ' - ' + message + '\n';
      consoleOutput.scrollTop = consoleOutput.scrollHeight;
    }
  };

  function runTests() {
    const results = document.getElementById('testResults');

    // Test 1: Check if File API is supported
    function testFileAPISupport() {
      const hasFileAPI = typeof FileReader !== 'undefined';
      const hasFileInput = typeof HTMLInputElement !== 'undefined';
      const hasDragDrop = 'ondragover' in document.createElement('div');

      const result = createResult(
          hasFileAPI && hasFileInput && hasDragDrop,
          '文件API支持 (FileReader, 文件输入, 拖拽)',
          '文件API不支持'
      );
      results.appendChild(result);

      if (hasFileAPI && hasFileInput && hasDragDrop) {
        console.log('✅ 文件API支持检测通过');
      } else {
        console.log('❌ 文件API支持检测失败');
      }

      return hasFileAPI && hasFileInput && hasDragDrop;
    }

    // Test 2: Check if image validation function exists
    function testImageValidation() {
      const hasFunction = typeof window.XiaohongshuPublisher !== 'undefined';
      const result = createResult(hasFunction, '图片验证函数存在', '图片验证函数不存在');
      results.appendChild(result);
      return hasFunction;
    }

    // Test 3: Check if progress display exists
    function testProgressDisplay() {
      const progressElement = document.getElementById('uploadProgress');
      const exists = progressElement !== null;
      const result = createResult(exists, '进度显示元素存在', '进度显示元素不存在');
      results.appendChild(result);
      return exists;
    }

    // Create result element
    function createResult(success, successMsg, errorMsg) {
      const result = document.createElement('div');
      result.className = 'test-result ' + (success ? 'success' : 'error');
      result.textContent = (success ? '✓' : '✗') + ' ' + (success ? successMsg : errorMsg);
      return result;
    }

    // Run all tests
    testFileAPISupport();
    testImageValidation();
    testProgressDisplay();

    // Add overall status
    const status = document.createElement('div');
    status.style.marginTop = '20px';
    status.style.fontWeight = 'bold';
    status.className = 'test-result info';
    status.textContent = '✅ 基础测试完成！请打开发布页面进行实际功能测试。';
    results.appendChild(status);
  }

  function testFileAPI() {
    console.log('🧪 开始测试文件API...');

    try {
      // Test FileReader
      if (typeof FileReader !== 'undefined') {
        console.log('✅ FileReader API 可用');
      } else {
        console.log('❌ FileReader API 不可用');
      }

      // Test File API
      if (typeof File !== 'undefined') {
        console.log('✅ File API 可用');
      } else {
        console.log('❌ File API 不可用');
      }

      // Test Drag and Drop
      if ('ondragover' in document.createElement('div')) {
        console.log('✅ 拖拽API 可用');
      } else {
        console.log('❌ 拖拽API 不可用');
      }

      // Test FormData
      if (typeof FormData !== 'undefined') {
        console.log('✅ FormData API 可用');
      } else {
        console.log('❌ FormData API 不可用');
      }

      console.log('🎉 文件API测试完成');

    } catch (error) {
      console.error('❌ 文件API测试出错:', error);
    }
  }

  function testFileValidation() {
    console.log('🧪 开始测试文件验证逻辑...');

    // 模拟文件对象
    const mockFiles = [
      {name: 'test.jpg', type: 'image/jpeg', size: 1024 * 1024}, // 1MB JPG
      {name: 'test.png', type: 'image/png', size: 5 * 1024 * 1024}, // 5MB PNG
      {name: 'test.gif', type: 'image/gif', size: 500 * 1024}, // 500KB GIF
      {name: 'test.webp', type: 'image/webp', size: 2 * 1024 * 1024}, // 2MB WebP
      {name: 'test.txt', type: 'text/plain', size: 1024}, // 文本文件（应该被拒绝）
      {name: 'large.jpg', type: 'image/jpeg', size: 15 * 1024 * 1024}, // 15MB（应该被拒绝）
    ];

    mockFiles.forEach(file => {
      console.log(`测试文件: ${file.name} (${file.type}, ${formatFileSize(file.size)})`);

      // 模拟验证逻辑
      const isValidImage = file.type.startsWith('image/');
      const isValidType = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif',
        'image/webp'].includes(file.type);
      const isValidSize = file.size <= 10 * 1024 * 1024; // 10MB

      if (isValidImage && isValidType && isValidSize) {
        console.log(`  ✅ 文件验证通过`);
      } else {
        console.log(`  ❌ 文件验证失败: ${!isValidImage ? '不是图片' : !isValidType ? '格式不支持'
            : '文件过大'}`);
      }
    });

    console.log('🎉 文件验证测试完成');
  }

  function formatFileSize(bytes) {
    if (bytes === 0) {
      return '0 Bytes';
    }
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
  }

  function clearConsole() {
    const consoleOutput = document.getElementById('consoleOutput');
    if (consoleOutput) {
      consoleOutput.textContent = '控制台日志已清除...\n';
    }
  }

  function openMainPage() {
    window.open('xiaohongshu-publish.html', '_blank');
  }

  // 页面加载完成后运行测试
  document.addEventListener('DOMContentLoaded', () => {
    runTests();
    console.log('🚀 上传功能测试页面加载完成');
    console.log('💡 提示：请打开发布页面进行实际文件上传测试');
  });
</script>
</body>
</html>